import React, { ComponentType } from 'react'
import { Route, RouteProps } from 'react-router-dom'

export default function KeepAlive({ component, ...rest }: RouteProps) {
  const Component = component as ComponentType

  return (
    <Route
      {...rest}
      // children 属性返回的jsx结构 不会在路由匹配失败时，卸载，而是一直在页面中
      // 因为将来在Article组件被匹配时 希望首页组件也要被匹配上
      // /test  <div>123</div>
      children={(props) => {
        // props.match 是否被成功匹配
        return (
          <div style={{ display: props.match ? 'block' : 'none' }}>
            <Component></Component>
          </div>
        )
      }}
    ></Route>
  )
}
